<template>
  <div class="component">
    <my-image 
      class="main"
      :src="imgs[0]"
      @click.native="previewPhoto(0)"
      ></my-image>
    <div class="subs flex-row" >
      <my-image 
        v-for="(item, index) in subImgs" 
        :key="index"
        :src="item"
        :width="subImgWidth"
        :height="subImgHeight"
        @click.native="previewPhoto(index + 1)"
        />
      <more-photo 
        :text="morePhotoText"
        :width="subImgWidth"
        :height="subImgHeight"
        @click.native="previewPhoto(subImgsLength + 1)"
        />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    imgs: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      subImgWidth: "160rpx",
      subImgHeight: "128rpx"
    }
  },
  computed: {
    morePhotoText() {
      if (this.imgs.length <= 4) {
        return "无更多"
      } else {
        return `+${this.imgs.length - 4}`
      }
    },
    subImgs() {
      return this.imgs.slice(1, 4)
    },
    subImgsLength() {
      return this.subImgs.length
    }
  },
  methods: {
    previewPhoto(index) {
      uni.previewImage({
        urls: this.imgs,
        current: index
      })
    }
  }
}
</script>

<style lang="less" scoped>
.component {
  .subs {
    font-size: 0;
    justify-content: start;
    my-image {
      margin-right: 10rpx;
    }
  }
}
</style>